<template>
  <div>
    <TableBarVue
      addBtn="添加"
      @myAddBtn="dialogFormVisible = true"
      :toBtn="{ path: '/system/cust', text: '匹配客户类型' }"
      :pageSize.sync="size"
    >
      <span class="bar-title"
        ><i class="el-icon-s-fold"></i>数据列表</span
      ></TableBarVue
    >
    <el-table
      :data="tableData"
      border
      style="width: 100%"
      class="table"
      v-loading="loading"
    >
      <el-table-column prop="id" label="编号" width="300"> </el-table-column>
      <el-table-column prop="priceName" label="价格体系名称" width="300">
      </el-table-column>
      <el-table-column label="操作" prop="id">
        <template slot-scope="scope">
          <el-button type="text" @click="edit(scope.row)">编辑</el-button>
          <el-button type="text" @click="del(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="clear tfoot">
      <el-pagination
        background
        layout="prev, pager, next,jumper"
        :total="total"
        :page-size="getSize"
        style="float: right"
        :current-page="currPage"
        @current-change="handerPage"
      >
      </el-pagination>
    </div>

    <el-dialog title="添加价格体系" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="编号">
          <el-input v-model="form.id" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="名称">
          <el-input v-model="form.priceName" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addMsg">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import TableBarVue from "@/components/tablebar/TableBar.vue";
import {
  getPriceApi,
  addEditPriceApi,
  // getPriceCount,
  addPriceIdApi,
  delPriceApi,
} from "@/http/priceApi/priceApi";
export default {
  name: "PriceView",
  data() {
    return {
      tableData: [],
      form: {
        id: "",
        priceName: "",
      },
      dialogFormVisible: false,
      size: 10,
      sort: "升序",
      total: 0,
      currPage: 1,
      loading: true,
    };
  },
  components: {
    TableBarVue,
  },
  created() {
    this.init(this.currPage, this.size);
  },
  methods: {
    async init(offset, size) {
      try {
        let data = await getPriceApi({ offset, size });
        if (data.data.code != 200) throw data.data;
        this.loading = false;
        this.tableData = data.data.data;
        this.total = data.data.totalCount;
        this.dialogFormVisible = false;
      } catch (e) {
        this.loading = false;
        this.$message({
          type: "error",
          message: e.msg || "请求数据失败",
        });
      }
    },
    //添加
    async addMsg() {
      try {
        let data = await addPriceIdApi({
          id: this.form.id,
          priceName: this.form.priceName,
        });
        if (data.data.code != 200) throw new Error(data.data.msg);
        this.$message({
          type: "success",
          message: "添加成功",
        });
        this.init(this.currPage, this.size);
      } catch (e) {
        console.log(e);
        this.$message.error("添加失败");
      }

      // this.$prompt("请输入价格体系", {
      //   confirmButtonText: "确定",
      //   cancelButtonText: "取消",
      // })
      //   .then(async ({ value }) => {
      //     try {
      //       let data = await addPriceIdApi({
      //         id: Date.now(),
      //         priceSystem: value,
      //       });
      //       if (data.data.code != 200) throw new Error(data.data.msg);
      //       this.$message({
      //         type: "success",
      //         message: "添加成功",
      //       });
      //     } catch (e) {
      //       console.log(e);
      //       this.$message.error("添加失败");
      //     }
      //   })
      //   .catch(() => {
      //   this.$message({
      //     type: "info",
      //     message: "取消输入",
      //   });
      // });
    },
    //删除
    del(id) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        type: "error",
        confirmButtonText: "确定",
        cancelButtonText: "取消",
      })
        .then(async () => {
          let data = await delPriceApi({ id });
          if (data.data.code != 200) throw new Error(data.data.msg);
          this.$message.success("删除成功");
          this.init(this.currPage, this.size);
        })
        .catch(() => {
          this.$message.info("取消删除");
        });
    },
    //修改
    edit(row) {
      this.$prompt("修改价格体系名称", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        inputValue: row.priceName,
      })
        .then(async ({ value }) => {
          try {
            await addEditPriceApi({ id: row.id, priceName: value });
            this.$message({
              type: "success",
              message: "修改成功",
            });
            this.init(this.currPage, this.size);
          } catch (e) {
            console.log(e);
            this.$message({
              type: "error",
              message: "修改失败",
            });
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "取消输入",
          });
        });
    },
    handerPage(offset) {
      this.init(offset, this.size);
      this.currPage = offset;
    },
  },
  computed: {
    getSize() {
      this.init(this.currPage, this.size);
      return this.size;
    },
  },
};
</script>

<style lang="scss" scoped>
@import "@/assets/sass/var.scss";
@import "@/assets/sass/pagination/page.scss";
.table ::v-deep td,
.table::v-deep th {
  text-align: center;
}
</style>